/* eslint-disable no-undef */
import './index.css';
let mask = document.querySelector('.mask');
let smallBox = document.querySelector('.smallBox');
let smallImg = document.querySelector('.smallBox > img');
let bigImg = document.querySelector('.bigBox > img');
let bigBox = document.querySelector('.bigBox');
let selectList = document.querySelectorAll('.selectImg > li');
let seletc = document.querySelector('.selectImg');
let box = document.querySelector('.box');

//遮罩层跟随鼠标
smallBox.addEventListener('mousemove', maskMove);

//遮罩层移动函数
function maskMove(event) {
    let moveX = event.pageX - box.offsetLeft - mask.offsetWidth / 2;
    let moveY = event.pageY - box.offsetTop - mask.offsetHeight / 2;

    let maxMoveX = smallBox.offsetWidth - mask.offsetWidth;
    let maxMoveY = smallBox.offsetHeight - mask.offsetHeight;
    if (moveX < 0) {
        moveX = 0;
    }
    if (moveX > maxMoveX) {
        moveX = maxMoveX - smallBox.clientLeft;
    }
    if (moveY < 0) {
        moveY = 0;
    }
    if (moveY > maxMoveY) {
        moveY = maxMoveY - smallBox.clientTop;
    }
    mask.style.left = moveX + 'px';
    mask.style.top = moveY + 'px';

    bigImgMoveX =
        ((bigImg.offsetWidth - bigBox.offsetWidth) / maxMoveX) * moveX;
    bigImgMoveY =
        ((bigImg.offsetHeight - bigBox.offsetHeight) / maxMoveY) * moveY;
    bigImg.style.transform = `translate(${-bigImgMoveX}px,${-bigImgMoveY}px)`;
}
selectList.forEach(function (item) {
    item.addEventListener('mouseenter', () => {
        smallImg.src = item.querySelector('img').src;
        bigImg.src = item.querySelector('img').src;
        seletc.querySelector('.active').classList.remove('active');
        item.querySelector('img').classList.add('active');
    });
});
smallBox.addEventListener('mouseleave', function () {
    mask.style.display = 'none';
    bigBox.style.display = 'none';
});
smallBox.addEventListener('mouseenter', function () {
    mask.style.display = 'block';
    bigBox.style.display = 'block';
});
